import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import './23-index.css'
const App = () => {

  const [isShow,setShow] = useState(false)

  // createPortal(要传送的内容, 将内容传送到哪里去, 可选的标识符)

  const portalHtml = isShow && createPortal((<div className='box' onClick={()=>{
    setShow(false)
}}>
    
    <p className='text'>
    <p className='x' onClick={()=>{
        setShow(false)
    }}>X</p>
      弹出的内容
    </p>
  </div>), document.querySelector('#app'))

    return (
      <div className='content'>
        {portalHtml}
        App - <button onClick={()=>{
          setShow(true)
        }}>点击弹出</button>
      </div>
  )
}

export default App